/* === Toolbars === */
.navbar-inner, .toolbar-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 8px; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.navbar-inner.cached { display: none; }
.navbar, .toolbar { height: 44px; width: 100%; box-sizing: border-box; font-size: 17px; position: relative; margin: 0; z-index: 500; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.navbar b, .toolbar b { font-weight: 500; }
html.ios-gt-8 .navbar b, html.ios-gt-8 .toolbar b { font-weight: 600; }
.navbar, .toolbar, .subnavbar { background: #f7f7f8; }
.navbar a.link, .toolbar a.link, .subnavbar a.link { line-height: 44px; height: 44px; text-decoration: none; position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: translateZ(0px); transform: translateZ(0px); }
html:not(.watch-active-state) .navbar a.link:active, html:not(.watch-active-state) .toolbar a.link:active, html:not(.watch-active-state) .subnavbar a.link:active, .navbar a.link.active-state, .toolbar a.link.active-state, .subnavbar a.link.active-state { opacity: 0.3; -webkit-transition-duration: 0ms; transition-duration: 0ms; }
.navbar a.link i + span, .toolbar a.link i + span, .subnavbar a.link i + span, .navbar a.link i + i, .toolbar a.link i + i, .subnavbar a.link i + i, .navbar a.link span + i, .toolbar a.link span + i, .subnavbar a.link span + i, .navbar a.link span + span, .toolbar a.link span + span, .subnavbar a.link span + span { margin-left: 7px; }
.navbar a.icon-only, .toolbar a.icon-only, .subnavbar a.icon-only { min-width: 44px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: 0; }
.navbar i.icon, .toolbar i.icon, .subnavbar i.icon { display: block; }
.navbar { left: 0; top: 0; }
.navbar:after { content: ''; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; width: 100%; background-color: #c4c4c4; display: block; z-index: 15; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
html.pixel-ratio-2 .navbar:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }
html.pixel-ratio-3 .navbar:after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }
.navbar:after { backface-visibility: hidden; }
.navbar.no-border:after { display: none; }
.navbar .center { font-size: 17px; font-weight: 500; text-align: center; margin: 0; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 44px; -webkit-flex-shrink: 10; -ms-flex: 0 10 auto; flex-shrink: 10; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
html.ios-gt-8 .navbar .center { font-weight: 600; }
.navbar .left, .navbar .right { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.navbar .left a + a, .navbar .right a + a { margin-left: 15px; }
.navbar .left { margin-right: 10px; }
.navbar .right { margin-left: 10px; }
.navbar .right:first-child { position: absolute; right: 8px; height: 100%; }
.popup .navbar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.subnavbar { height: 44px; width: 100%; position: absolute; left: 0; top: 100%; margin-top: -1px; z-index: 20; box-sizing: border-box; padding: 0 8px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.subnavbar:after { content: ''; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; width: 100%; background-color: #c4c4c4; display: block; z-index: 15; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
html.pixel-ratio-2 .subnavbar:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }
html.pixel-ratio-3 .subnavbar:after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }
.subnavbar.no-border:after { display: none; }
.navbar.no-border .subnavbar { margin-top: 0; }
.navbar-on-left .subnavbar, .navbar-on-right .subnavbar { pointer-events: none; }
.navbar .subnavbar, .page .subnavbar { position: absolute; }
.page > .subnavbar { top: 0; margin-top: 0; }
.subnavbar > .buttons-row { width: 100%; }
.subnavbar .searchbar, .subnavbar.searchbar { position: absolute; }
.subnavbar.searchbar, .subnavbar .searchbar { position: absolute; }
.subnavbar .searchbar { left: 0; top: 0; }
.toolbar { left: 0; bottom: 0; }
.toolbar:before { content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; height: 1px; width: 100%; background-color: #c4c4c4; display: block; z-index: 15; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; }
html.pixel-ratio-2 .toolbar:before { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }
html.pixel-ratio-3 .toolbar:before { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }
.toolbar.no-border:before { display: none; }
.toolbar a { -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; flex-shrink: 1; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tabbar { color: #929292; z-index: 5001; }
.tabbar a { color: #929292; }
.tabbar a.active { color: #007aff; }
.tabbar a.link { line-height: 1.4; }
.tabbar a.tab-link, .tabbar a.link { height: 100%; width: 100%; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: visible; -webkit-box-flex: 1; -ms-flex: 1; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
.tabbar i.icon { height: 30px; }
.tabbar-labels { height: 50px; }
.tabbar-labels a.tab-link, .tabbar-labels a.link { padding-top: 4px; padding-bottom: 4px; height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
.tabbar-labels a.tab-link i + span, .tabbar-labels a.link i + span { margin: 0; }
.tabbar-labels span.tabbar-label { line-height: 1; display: block; margin: 0; letter-spacing: 0.01em; font-size: 10px; position: relative; text-overflow: ellipsis; white-space: nowrap; }
.subnavbar input[type="text"], .navbar input[type="text"], .subnavbar input[type="password"], .navbar input[type="password"], .subnavbar input[type="search"], .navbar input[type="search"], .subnavbar input[type="email"], .navbar input[type="email"], .subnavbar input[type="tel"], .navbar input[type="tel"], .subnavbar input[type="url"], .navbar input[type="url"] { box-sizing: border-box; width: 100%; height: 28px; display: block; border: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; border-radius: 5px; font-family: inherit; color: #000; font-size: 14px; font-weight: normal; padding: 0 8px; background-color: #fff; }

@media all and (min-width: 768px) {
.tabbar .toolbar-inner { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
.tabbar a.tab-link,  .tabbar a.link { width: auto; min-width: 105px; }
.tabbar-labels { height: 56px; }
.tabbar-labels span.tabbar-label { font-size: 14px; }
}
.navbar-from-right-to-center .left, .navbar-from-right-to-center .right, .navbar-from-right-to-center .center, .navbar-from-right-to-center .subnavbar, .navbar-from-right-to-center .fading { -webkit-animation: navbarElementFadeIn 400ms forwards; animation: navbarElementFadeIn 400ms forwards; }
.navbar-from-right-to-center .sliding { opacity: 1; }
.navbar-from-center-to-right .left, .navbar-from-center-to-right .right, .navbar-from-center-to-right .center, .navbar-from-center-to-right .subnavbar, .navbar-from-center-to-right .fading { -webkit-animation: navbarElementFadeOut 400ms forwards; animation: navbarElementFadeOut 400ms forwards; }
.navbar-from-center-to-right .sliding { opacity: 0; }
.navbar-from-center-to-right .subnavbar.sliding { opacity: 1; }
@-webkit-keyframes navbarElementFadeIn {
 from {
 opacity: 0;
}
 to {
 opacity: 1;
}
}
@keyframes navbarElementFadeIn {
 from {
 opacity: 0;
}
 to {
 opacity: 1;
}
}
.navbar-from-center-to-left .left, .navbar-from-center-to-left .right, .navbar-from-center-to-left .center, .navbar-from-center-to-left .subnavbar, .navbar-from-center-to-left .fading { -webkit-animation: navbarElementFadeOut 400ms forwards; animation: navbarElementFadeOut 400ms forwards; }
.navbar-from-center-to-left .sliding { opacity: 0; }
.navbar-from-center-to-left .subnavbar.sliding { opacity: 1; }
.navbar-from-left-to-center .left, .navbar-from-left-to-center .right, .navbar-from-left-to-center .center, .navbar-from-left-to-center .subnavbar, .navbar-from-left-to-center .fading { -webkit-animation: navbarElementFadeIn 400ms forwards; animation: navbarElementFadeIn 400ms forwards; }
.navbar-from-left-to-center .sliding { opacity: 1; }
.navbar-on-left .left, .navbar-on-left .right, .navbar-on-left .center, .navbar-on-left .subnavbar, .navbar-on-left .fading { opacity: 0; }
.navbar-on-left .sliding { opacity: 0; }
.navbar-on-left .subnavbar.sliding { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
.navbar-on-right .left, .navbar-on-right .right, .navbar-on-right .center, .navbar-on-right .subnavbar, .navbar-on-right .fading { opacity: 0; }
.navbar-on-right .sliding { opacity: 0; }
.navbar-on-right .subnavbar.sliding { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
@-webkit-keyframes navbarElementFadeOut {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
}
}
@keyframes navbarElementFadeOut {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
}
}
.navbar-from-right-to-center .left.sliding .back.link .icon, .navbar-from-center-to-right .left.sliding .back.link .icon, .navbar-from-center-to-left .left.sliding .back.link .icon, .navbar-from-left-to-center .left.sliding .back.link .icon { -webkit-transition-duration: 400ms; transition-duration: 400ms; }
.navbar-from-right-to-center .sliding, .navbar-from-center-to-right .sliding, .navbar-from-center-to-left .sliding, .navbar-from-left-to-center .sliding { -webkit-transition-duration: 400ms; transition-duration: 400ms; -webkit-animation: none; animation: none; }
/* === Message Bar === */
.messagebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-duration: 0ms; transition-duration: 0ms; background: #fff; }
.messagebar:before { display: none; }
.messagebar textarea { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #c8c8cd; background: #fff; border-radius: 17px; box-shadow: none; display: block; padding: 6px 15px; margin: 0; width: 72%; height: 34px; color: #000; font-size: 17px; line-height: 20px; font-family: inherit; resize: none; -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; flex-shrink: 1; outline: 0; }
.messagebar .link { -ms-flex-item-align: flex-end; -webkit-align-self: flex-end; align-self: flex-end; }
.messagebar .link.icon-only:first-child { margin-left: -6px; }
.messagebar .link:not(.icon-only) + textarea { margin-left: 8px; }
.messagebar textarea + .link { margin-left: 8px; }
.messagebar .link { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; }
.messagebar ~ .page-content { padding-bottom: 44px; }
.page.no-toolbar .messagebar ~ .page-content { padding-bottom: 44px; }
.hidden-toolbar .messagebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-duration: 0ms; transition-duration: 0ms; }
/* === Messages === */
.messages-content { /*background: #fff;
 padding-top: 220px;*/
}
.messages { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
.messages-date { text-align: center; font-weight: 500; font-size: 11px; line-height: 1; margin: 10px 15px; color: #8e8e93; }
html.ios-gt-8 .messages-date { font-weight: 600; }
.messages-date span { font-weight: 400; }
.message { box-sizing: border-box; margin: 1px 10px 0; max-width: 80%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
.message:first-child { margin-top: 10px; }
.message .message-text { box-sizing: border-box; border-radius: 16px; padding: 13px 16px 9px; min-width: 48px; min-height: 35px; font-size: 14px; line-height: 1.5; word-break: break-word; }
.message .message-text img { max-width: 100%; }
.message.message-pic .message-text { padding: 0; background: none; }
.message.message-pic img { display: block; height: auto; max-width: 100%; border-radius: 16px; }
.message-name { width: 90%; font-size: 12px; line-height: 1; color: #8e8e93; margin-bottom: 2px; margin-top: 7px; }
.message-name i { color: #EA554E; font-size: 18px; float: right; }
.message-hide-name .message-name { display: none; }
.message-label { font-size: 12px; line-height: 1; color: #8e8e93; margin-top: 4px; }
.message-hide-label .message-label { display: none; }
.message-avatar { width: 40px; height: 40px; border-radius: 100%; margin-top: -29px; position: relative; top: 1px; background-size: cover; opacity: 1; -webkit-transition-duration: 400ms; transition-duration: 400ms; }
.message-hide-avatar .message-avatar { opacity: 0; }
.message-sent { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; }
.message-sent .message-name { margin-right: 16px; }
.message-sent .message-label { margin-right: 6px; }
.message-sent.message-with-avatar .message-text { margin-right: 29px; }
.message-sent.message-with-avatar .message-name { margin-right: 45px; }
.message-sent.message-with-avatar .message-label { margin-right: 34px; }
.message-sent .message-text { padding-right: 22px; background-color: #aee36f; color: #000000; margin-left: auto; -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%; }
.message-sent.message-last .message-text, .message-sent.message-with-tail .message-text { border-radius: 16px 16px 0 16px; -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%; }
.message-sent.message-last.message-pic img, .message-sent.message-with-tail.message-pic img { border-radius: 16px 16px 0 16px; }
.message-received { -ms-flex-item-align: start; -webkit-align-self: flex-start; align-self: flex-start; -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; }
.message-received .message-text { padding-left: 22px; background-color: #e5e5ea; color: #333; -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%; }
.message-received .message-name { margin-left: 16px; }
.message-received .message-label { margin-left: 6px; }
.message-received.message-with-avatar .message-text { margin-left: 40px; }
.message-received.message-with-avatar .message-name { margin-left: 45px; }
.message-received.message-with-avatar .message-label { margin-left: 34px; }
.message-received.message-last .message-text, .message-received.message-with-tail .message-text { border-radius: 16px 16px 16px 0; -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%; }
.message-received.message-last.message-pic img, .message-received.message-with-tail.message-pic img { border-radius: 16px 16px 16px 0; }
.message-last { margin-bottom: 8px; }
.message-appear-from-bottom { -webkit-animation: messageAppearFromBottom 400ms; animation: messageAppearFromBottom 400ms; }
.message-appear-from-top { -webkit-animation: messageAppearFromTop 400ms; animation: messageAppearFromTop 400ms; }
.messages-auto-layout .message-name, .messages-auto-layout .message-label { display: none; }
.messages-auto-layout .message-avatar { opacity: 0; }
.messages-auto-layout .message-first .message-name { display: block; }
.messages-auto-layout .message-last .message-avatar { opacity: 1; }
.messages-auto-layout .message-last .message-label { display: block; }
html.retina.ios-6 .message, html.retina.ios-6 .message.message-pic img { -webkit-mask-box-image: none; border-radius: 16px; }
@-webkit-keyframes messageAppearFromBottom {
 from {
 -webkit-transform: translate3d(0, 100%, 0);
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
}
}
@keyframes messageAppearFromBottom {
 from {
 transform: translate3d(0, 100%, 0);
}
 to {
 transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes messageAppearFromTop {
 from {
 -webkit-transform: translate3d(0, -100%, 0);
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
}
}
@keyframes messageAppearFromTop {
 from {
 transform: translate3d(0, -100%, 0);
}
 to {
 transform: translate3d(0, 0, 0);
}
}

.message-sent .message-text{
	margin-right: 40px;
}